<template>
	<view class="container">
		<block v-if="isShowPage">
			<view class="main">
				<view class="logo">
					<image  src="../../static/images/kd_logo.png"></image>
				</view>
				<view class="edit">
					<view class="edt_item">
						<image src="../../static/images/user.png"></image>
						<input class="edt uni-input" @keydown.enter="login()" v-model="userName" cursor-spacing="0"
							placeholder="请输入学号" @input="userInput" />
					</view>
					<view class="divider"></view>
					<view class="edt_item">
						<image  src="../../static/images/pass.png"></image>
						<input class="edt uni-input" @keydown.enter="login()" v-model="pwd" cursor-spacing="0"
							placeholder="请输入密码" @input="pwdInput" type="password" />
					</view>
				</view>
				<view class="divider"></view>
				<view class="login bg-theme" @click="login">登录</view>
			</view>
		</block>
		<block v-else>
			<view class="login_out bg-login">
				<view class="sword">
					<span></span>
					<span></span>
					<span></span>
				</view>
				<view class="tips">
					系统加载中...
				</view>
			</view>
		</block>

	</view>
</template>

<script>
	const api = require('@/utils/api.js');
	const util = require("@/utils/util.js")
	var md5Util = require('@/utils/md5.js');
	export default {
		data() {
			return {
				userName: "",
				pwd: "",
				isShowPage: false,
				judgeObj: util.judgeObj(),
			};
		},
		methods: {
			//用户输入
			userInput(e) {
				this.userName = util.trim(e.detail.value);
			},
			//密码输入
			pwdInput(e) {
				this.pwd = util.trim(e.detail.value);
			},
			
			getParam(path, name) {
				var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
				if (reg.test(path))
					return unescape(RegExp.$2.replace(/\+/g, " "));
				return "";
			},
			// 判断是否是微信内置浏览器
			isWeiXin() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true;
				} else {
					return false;
				}
			},
			//登录
			login() {
				let that = this;
				if (!that.userName) {
					util.toast("用户名不能为空")
					return
				}
				if (!that.pwd) {
					util.toast("密码不能为空")
					return
				}
				util.request(api.login, {
					"username": that.userName,
					"password": md5Util.hexMD5(that.pwd)
				}).then(res => {
					uni.setStorageSync("token", res.datas.token);
					uni.setStorageSync("name", res.datas.user.realName);
					uni.setStorageSync("username", that.userName);
					uni.setStorageSync("password", that.pwd);
					let phone = "";
					if (res.datas.user.userType == 1) {
						phone = res.datas.user.student.telphone ? res.datas.user.student.telphone : ""
					} else {
						phone = res.datas.user.teacher.telphone ? res.datas.user.teacher.telphone : ""
					}
					uni.setStorageSync("phone", phone);
					uni.setStorageSync("menus", res.datas.menus);
					uni.setStorage({
						key: "user",
						data: res.datas.user,
						success() {
							uni.switchTab({
								url: "../home/home"
							})
						}
					})
				})
			}
		},
		onLoad() {
			let that = this;
			let local = location.href;
			// let token = this.getParam(local, "token") ? this.getParam(local, "token") : null;
			// let routeId = this.getParam(local, "routeId") ? this.getParam(local, "routeId") : null;
			
			// if (token) {
				// if (token != 'xzl159357') {
				// 	util.request(api.loginSSO, {
				// 		'askType': 'h5',
				// 		"token": token,
				// 		'onlyToken': null,
				// 		"routeId": routeId
				// 	}).then(res => {
				// 		if (res.status == 200) {
				// 			uni.setStorageSync("token", res.datas.token);
				// 			uni.setStorageSync("name", res.datas.user.realName);
				// 			uni.setStorageSync("username", that.userName);
				// 			uni.setStorageSync("password", that.pwd);
				// 			let phone = "";
				// 			if (res.datas.user.userType == 1) {
				// 				phone = res.datas.user.student.telphone ? res.datas.user.student.telphone : ""
				// 			} else {
				// 				phone = res.datas.user.teacher.telphone ? res.datas.user.teacher.telphone : ""
				// 			}
				// 			uni.setStorageSync("phone", phone);
				// 			uni.setStorageSync("menus", res.datas.menus);
				// 			if (res.datas.routeUrl) {
				// 				if (res.datas.routeUrl == '/pages/home/home' || res.datas.routeUrl ==
				// 					'/pages/msg/msg' || res.datas.routeUrl == '/pages/mine/mine') {
				// 					uni.switchTab({
				// 						url: res.datas.routeUrl
				// 					})
				// 				} else {
				// 					uni.redirectTo({
				// 						url: res.datas.routeUrl
				// 					})
				// 				}
				// 			} else {
				// 				uni.switchTab({
				// 					url: '/pages/home/home'
				// 				})
				// 			}
				// 			uni.setStorage({
				// 				key: "user",
				// 				data: res.datas.user,
				// 				success() {}
				// 			})
				// 		} else {
				// 			setTimeout(() => {
				// 				window.location.href = util.judgeObj().loginPage + '?v='+(new Date().getTime());
				// 				window.location.reload;
				// 			}, 2000)
				// 		}
				// 	})
				// } else {
					this.isShowPage = true;
					uni.getStorage({
						key: "user",
						success: res => {
							if (res) {
								uni.switchTab({
									url: "../home/home"
								})
							}
						}
					});
					uni.getStorage({
						key: "username",
						success: res => {
							if (res && res.errMsg == "getStorage:ok") {
								this.userName = res.data;
							}
						}
					});
					uni.getStorage({
						key: "password",
						success: res => {
							if (res && res.errMsg == "getStorage:ok") {
								this.pwd = res.data;
							}
						}
					})
				// }
			// } else {
			// 	window.location.href = util.judgeObj().loginPage + '?v='+(new Date().getTime());
			// 	window.location.reload;
			// }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}

	.checkBox {
		display: flex;
		justify-content: center;
	}

	.main {
		position: absolute;
		width:100%;
		height:100%;
		background: url('@/static/images/login_bg.png') no-repeat;
		background-size: 100% 100%;
	}
	.logo{
		text-align: center;
		margin: 0 auto;
		margin-top: 80rpx;
	}
	.logo image{
		width: 300rpx;
		height: 300rpx;
	}

	.title {
		color: #7aabf9;
		font-size: 34rpx;
		margin-top: 10rpx;
		text-align: center;
		margin-bottom: 20rpx;
		color: #313131;
		font-weight: bold;
	}
	.edit {
		margin-top:300rpx;
	}
	.edt_item {
		display: flex;
		flex-direction: row;
		margin: 80rpx 100rpx 0 100rpx;
		align-items: center;
		background-color: #fff;
	}
	.edt_item image {
		width: 48rpx;
		height: 48rpx;
		margin:20rpx;
	}
	.uni-input-placeholder {
		color: #97ABD3!important;
	}
	.icon {
		width: 48rpx;
		height: 48rpx;
	}

	.edt {
		width: 100%;
		font-size: 40rpx;
		color: #999;
		margin-left: 20rpx;
		border: none;
	}

	.divider {
		color: #fafafa;
		height: 1rpx;
		margin: 20rpx 100rpx 0 100rpx;
	}

	.login {
		height: 80rpx;
		margin: 80rpx 100rpx 30rpx 100rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 80rpx;
		text-align: center;
		box-shadow: #313131 1px 2px 4px 2px;
	}

	.bg-login {
		width: 100%;
		height: 100%;
		background: none;
		background: rgba(0, 0, 0, .3);
		position: relative;

		.tips {
			position: absolute;
			margin-left: -90px;
			top: calc(35% + 64px);
			left: 50%;
			font-size: 30px;
			color: #fff;
		}
	}

	.sword {
		position: relative;
		width: 128rpx;
		height: 128rpx;
		top: 35%;
		left: 50%;
		margin-left: -64rpx;
		border-radius: 50%;
	}

	.sword span {
		position: absolute;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.sword :first-child {
		left: 0%;
		top: 0%;
		border-bottom: 3px solid #EFEFFA;
		animation: sword-one 1s linear infinite;
	}

	.sword :nth-child(2) {
		right: 0%;
		top: 0%;
		animation: sword-two 1s linear infinite;
		border-right: 3px solid #EFEFFA;
	}

	.sword :last-child {
		right: 0%;
		bottom: 0%;
		animation: sword-three 1s linear infinite;
		border-top: 3px solid #EFEFFA;
	}

	@keyframes sword-one {
		0% {
			transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
		}

		100% {
			transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
		}
	}

	@keyframes sword-two {
		0% {
			transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
		}

		100% {
			transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
		}
	}

	@keyframes sword-three {
		0% {
			transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
		}

		100% {
			transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
		}
	}
</style>
